<template>
  <div>
    <el-card style="margin-bottom: 20px">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="用户名">
            <el-input
              v-model="searchParams.userName"
              placeholder="请输入用户名"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户账号">
            <el-input
              v-model="searchParams.userAccount"
              placeholder="请输入用户账号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户简介">
            <el-input
              v-model="searchParams.userProfile"
              placeholder="请输入用户简介"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button @click="resetSearchParams">重置</el-button>
            <el-button type="primary" @click="getUserList">查询 </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <el-table
      v-loading="loading"
      :data="userList"
      border
      style="width: 100%; margin-bottom: 10px"
      :pagination="pagination"
    >
      <el-table-column type="index" width="48"></el-table-column>
      <el-table-column
        label="用户名"
        prop="userName"
        :copyable="true"
      ></el-table-column>
      <el-table-column
        label="用户账户"
        prop="userAccount"
        :copyable="true"
      ></el-table-column>
      <el-table-column label="头像" prop="userAvatar" width="150px">
        <template #default="{ row }">
          <el-image :src="row.userAvatar" style="width: 100px" />
        </template>
      </el-table-column>
      <el-table-column
        label="用户简介"
        prop="userProfile"
        :copyable="true"
      ></el-table-column>
      <el-table-column label="角色" prop="userRole">
        <template #default="{ row }">
          <el-select v-model="row.userRole" placeholder="选择角色" disabled>
            <el-option
              v-for="(item, value) in roleEnum"
              :key="value"
              :label="item.text"
              :value="value"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="余额" prop="balance" width="120px">
        <template #default="{ row }">
          <span>{{ formatBalance(row.balance) }} 元</span>
        </template>
      </el-table-column>
      <el-table-column label="AI剩余次数" prop="aiRemainNumber" width="120px">
        <template #default="{ row }">
          <span>{{ row.aiRemainNumber || 0 }} 次</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        sortable
        :formatter="formatDate"
      ></el-table-column>
      <el-table-column label="操作" width="280px">
        <template #default="{ row }">
          <div class="operation-buttons">
            <el-button size="small" @click="edit(row)" type="primary">编辑</el-button>
            <el-button size="small" @click="view(row)" type="info">查看</el-button>
            
            <el-dropdown @command="handleRechargeCommand($event, row)" trigger="click">
              <el-button size="small" type="success">
                充值
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="balance">余额充值</el-dropdown-item>
                  <el-dropdown-item command="ai">AI额度充值</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            
            <el-popconfirm
              title="你确定要删除该用户吗？"
              @confirm="deleteUser(row)"
              @cancel="cancelEvent"
            >
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[5, 10, 15, 20]"
      :current-page="pagination.currentPage"
      :total="pagination.total"
      :page-size="pagination.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 编辑对话框 -->
    <el-dialog
      title="编辑用户"
      v-model="editDialogVisible"
      width="50%"
      @close="resetEditField(editFormRef)"
    >
      <el-form :model="editForm" ref="editFormRef">
        <el-form-item
          label="用户名"
          :label-width="formLabelWidth"
          label-position="left"
        >
          <el-input v-model="editForm.userName" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="用户头像"
          :label-width="formLabelWidth"
          label-position="left"
        >
          <div class="upload-section">
            <el-upload
              class="avatar-uploader"
              action=""
              :auto-upload="false"
              :show-file-list="false"
              :on-change="handleAvatarChange"
            >
              <div class="upload-area">
                <img v-if="imageUrl" :src="imageUrl" class="avatar-preview" alt="预览" />
                <img v-else-if="editForm.userAvatar" :src="editForm.userAvatar" class="avatar-preview" alt="当前头像" />
                <div v-else class="upload-placeholder">
                  <el-icon class="upload-icon"><Plus /></el-icon>
                  <div class="upload-text">
                    <span class="primary-text">点击上传头像</span>
                    <span class="secondary-text">建议尺寸 200×200px</span>
                  </div>
                </div>
              </div>
            </el-upload>
            
            <div class="upload-tips">
              支持 JPG、PNG 格式，文件小于 1MB
            </div>
          </div>
        </el-form-item>
        <el-form-item
          label="用户简介"
          :label-width="formLabelWidth"
          label-position="left"
        >
          <el-input v-model="editForm.userProfile" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="角色"
          :label-width="formLabelWidth"
          label-position="left"
        >
          <el-select
            v-model="editForm.userRole"
            placeholder="选择角色"
            clearable
            readonly
          >
            <el-option
              v-for="(item, value) in roleEnum"
              :key="value"
              :label="item.text"
              :value="value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <slot name="footer">
          <el-button @click="resetEditField(editFormRef)">取消</el-button>
          <el-button type="primary" @click="saveEditForm">保存</el-button></slot
        >
      </span>
    </el-dialog>

    <!-- 查看对话框 -->
    <el-dialog title="查看用户" v-model="viewDialogVisible" width="50%">
      <el-form :model="viewForm" ref="viewFormRef" disabled>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="viewForm.userName" readonly />
        </el-form-item>
        <el-form-item label="用户账户" :label-width="formLabelWidth">
          <el-input v-model="viewForm.userAccount" readonly />
        </el-form-item>
        <el-form-item label="用户简介" :label-width="formLabelWidth">
          <el-input v-model="viewForm.userProfile" readonly />
        </el-form-item>
        <el-form-item label="余额" :label-width="formLabelWidth">
          <el-input :value="formatBalance(viewForm.balance)" readonly>
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="AI剩余次数" :label-width="formLabelWidth">
          <el-input :value="viewForm.aiRemainNumber || 0" readonly>
            <template #append>次</template>
          </el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select
            v-model="editForm.userRole"
            placeholder="选择角色"
            clearable
            readonly
          >
            <el-option
              v-for="(item, value) in roleEnum"
              :key="value"
              :label="item.text"
              :value="value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <slot name="footer">
          <el-button @click="viewDialogVisible = false">关闭</el-button></slot
        >
      </span>
    </el-dialog>

    <!-- 充值对话框 -->
    <el-dialog
      title="用户余额充值"
      v-model="rechargeDialogVisible"
      width="450px"
      class="recharge-dialog"
      destroy-on-close
    >
      <div class="recharge-container">
        <div class="recharge-header">
          <el-avatar :size="64" :src="currentRechargeUser.userAvatar || defaultAvatar">
            {{ currentRechargeUser.userName?.substring(0, 1) }}
          </el-avatar>
          <div class="user-info">
            <h3>{{ currentRechargeUser.userName }}</h3>
            <p class="user-account">{{ currentRechargeUser.userAccount }}</p>
          </div>
        </div>
        
        <div class="balance-info">
          <div class="balance-label">当前余额</div>
          <div class="balance-value">{{ formatBalance(rechargeForm.currentBalance) }} 元</div>
        </div>
        
        <div class="recharge-form">
          <div class="form-item">
            <div class="form-label"><span class="required">*</span> 充值金额</div>
            <div class="amount-input-container">
              <span class="currency-prefix">¥</span>
              <el-input
                v-model="rechargeForm.amount"
                placeholder="请输入充值金额"
                type="number"
                :min="0.01"
                :step="0.01"
                class="amount-input"
              />
            </div>
          </div>
          
          <div class="quick-amounts">
            <el-button 
              v-for="amount in quickAmounts" 
              :key="amount" 
              size="default" 
              @click="rechargeForm.amount = amount"
              :class="{ 'active': Number(rechargeForm.amount) === amount }"
              plain
            >
              {{ amount }}元
            </el-button>
          </div>
        </div>
        
        <div class="recharge-preview">
          <div class="preview-item">
            <span class="preview-label">充值后余额</span>
            <span class="preview-value">{{ formatBalance(Number(rechargeForm.currentBalance) + Number(rechargeForm.amount)) }} 元</span>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="rechargeDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="rechargeBalance" :loading="rechargeLoading">
            确认充值
          </el-button>
        </div>
      </template>
    </el-dialog>
    
    <!-- AI额度充值对话框 -->
    <el-dialog
      title="用户AI额度充值"
      v-model="aiRechargeDialogVisible"
      width="450px"
      class="recharge-dialog ai-recharge-dialog"
      destroy-on-close
    >
      <div class="recharge-container">
        <div class="recharge-header">
          <el-avatar :size="64" :src="currentRechargeUser.userAvatar || defaultAvatar">
            {{ currentRechargeUser.userName?.substring(0, 1) }}
          </el-avatar>
          <div class="user-info">
            <h3>{{ currentRechargeUser.userName }}</h3>
            <p class="user-account">{{ currentRechargeUser.userAccount }}</p>
          </div>
        </div>
        
        <div class="balance-info">
          <div class="balance-label">当前AI剩余次数</div>
          <div class="balance-value">{{ aiRechargeForm.currentAiRemainNumber || 0 }} 次</div>
        </div>
        
        <div class="recharge-form">
          <div class="form-item">
            <div class="form-label"><span class="required">*</span> 充值次数</div>
            <div class="amount-input-container">
              <span class="currency-prefix"><i class="el-icon-chat-dot-round"></i></span>
              <el-input
                v-model="aiRechargeForm.amount"
                placeholder="请输入充值次数"
                type="number"
                :min="1"
                :step="1"
                class="amount-input"
              />
            </div>
          </div>
          
          <div class="quick-amounts">
            <el-button 
              v-for="amount in aiQuickAmounts" 
              :key="amount" 
              size="default" 
              @click="aiRechargeForm.amount = amount"
              :class="{ 'active': Number(aiRechargeForm.amount) === amount }"
              plain
            >
              {{ amount }}次
            </el-button>
          </div>
        </div>
        
        <div class="recharge-preview">
          <div class="preview-item">
            <span class="preview-label">充值后AI剩余次数</span>
            <span class="preview-value">{{ Number(aiRechargeForm.currentAiRemainNumber) + Number(aiRechargeForm.amount) }} 次</span>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="aiRechargeDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="rechargeAiBalance" :loading="aiRechargeLoading">
            确认充值
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  ElButton,
  ElImage,
  ElMessage,
  ElOption,
  ElPagination,
  ElSelect,
  ElTable,
  ElTableColumn,
  FormInstance
} from "element-plus";
import {
  deleteUserUsingPost,
  listUserByPageUsingPost,
  updateUserUsingPost
} from "@/api/userController";
import { uploadFileUsingPost } from "@/api/fileController";
import { Plus, ArrowDown } from "@element-plus/icons-vue";
import { ElUpload } from "element-plus";

const loading = ref(false);
const userList = ref([]);
const pagination = ref({
  currentPage: 1,
  pageSize: 5,
  total: 0
});
const searchParams = ref({
  userName: "",
  userProfile: "",
  userAccount: ""
});
const formLabelWidth = "80px";
const roleEnum = {
  user: { text: "普通用户", status: "Default" },
  admin: { text: "管理员", status: "Success" }
};

// 默认头像
const defaultAvatar = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";

// 快速充值金额选项
const quickAmounts = [10, 50, 100, 200, 500];

// AI快速充值金额选项
const aiQuickAmounts = [5, 10, 20, 50, 100];

// 表单数据
const editDialogVisible = ref(false);
const viewDialogVisible = ref(false);
const rechargeDialogVisible = ref(false);
const aiRechargeDialogVisible = ref(false);
const editForm = ref({
  id: 0,
  userName: "",
  userAccount: "",
  userProfile: "",
  userRole: ""
});
const editFormRef = ref<FormInstance>();
const viewForm = ref();

// 充值表单数据
const rechargeForm = ref({
  id: 0,
  userName: "",
  currentBalance: 0,
  amount: 10
});
const rechargeFormRef = ref<FormInstance>();
const rechargeLoading = ref(false);

// 当前充值用户信息
const currentRechargeUser = ref({
  id: 0,
  userName: "",
  userAccount: "",
  userAvatar: "",
  balance: 0,
  aiRemainNumber: 0
});

// AI充值表单数据
const aiRechargeForm = ref({
  id: 0,
  userName: "",
  currentAiRemainNumber: 0,
  amount: 5
});
const aiRechargeFormRef = ref<FormInstance>();
const aiRechargeLoading = ref(false);

// 格式化余额
const formatBalance = (balance) => {
  if (balance === undefined || balance === null) {
    return '0.00';
  }
  return parseFloat(balance).toFixed(2);
};

// 格式化时间
const formatDate = (row, column, cellValue) => {
  return new Date(cellValue).toLocaleString();
};
const handleSizeChange = (val: number) => {
  pagination.value.pageSize = val;
  getUserList();
};
// 获取用户数据
const getUserList = async () => {
  loading.value = true;
  try {
    const res = await listUserByPageUsingPost({
      current: pagination.value.currentPage,
      pageSize: pagination.value.pageSize,
      userProfile: searchParams.value.userProfile,
      userName: searchParams.value.userName,
      userAccount: searchParams.value.userAccount
    });
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    userList.value = res.data.records || [];
    pagination.value.total = parseInt(res.data.total) || 0;
  } catch (error: any) {
    ElMessage.error("获取用户列表失败，" + error.message);
  } finally {
    loading.value = false;
  }
};
// 编辑用户
const edit = (row) => {
  editDialogVisible.value = row;
  Object.assign(editForm.value, row);
  imageUrl.value = ""; // 重置预览图
};

// 打开充值对话框
const openRechargeDialog = (row) => {
  // 保存当前用户信息
  currentRechargeUser.value = { ...row };
  
  rechargeForm.value.id = row.id;
  rechargeForm.value.userName = row.userName;
  rechargeForm.value.currentBalance = row.balance || 0;
  rechargeForm.value.amount = 10;
  rechargeDialogVisible.value = true;
};

// 打开AI充值对话框
const openAiRechargeDialog = (row) => {
  // 保存当前用户信息
  currentRechargeUser.value = { ...row };
  
  aiRechargeForm.value.id = row.id;
  aiRechargeForm.value.userName = row.userName;
  aiRechargeForm.value.currentAiRemainNumber = row.aiRemainNumber || 0;
  aiRechargeForm.value.amount = 5;
  aiRechargeDialogVisible.value = true;
};

// 充值余额
const rechargeBalance = async () => {
  if (!rechargeForm.value.amount || rechargeForm.value.amount <= 0) {
    ElMessage.warning('请输入有效的充值金额');
    return;
  }
  
  rechargeLoading.value = true;
  
  try {
    const res = await updateUserUsingPost({
      id: rechargeForm.value.id,
      balance: Number(rechargeForm.value.currentBalance) + Number(rechargeForm.value.amount)
    });
    
    if (res.code === 200) {
      ElMessage.success({
        message: '充值成功',
        type: 'success',
        duration: 2000
      });
      rechargeDialogVisible.value = false;
      await getUserList();
    } else {
      ElMessage.error(res.msg || '充值失败');
    }
  } catch (error: any) {
    ElMessage.error('充值失败，' + error.message);
  } finally {
    rechargeLoading.value = false;
  }
};

// 充值AI额度
const rechargeAiBalance = async () => {
  if (!aiRechargeForm.value.amount || aiRechargeForm.value.amount <= 0) {
    ElMessage.warning('请输入有效的充值次数');
    return;
  }
  
  aiRechargeLoading.value = true;
  
  try {
    const res = await updateUserUsingPost({
      id: aiRechargeForm.value.id,
      aiRemainNumber: Number(aiRechargeForm.value.currentAiRemainNumber) + Number(aiRechargeForm.value.amount)
    });
    
    if (res.code === 200) {
      ElMessage.success({
        message: 'AI额度充值成功',
        type: 'success',
        duration: 2000
      });
      aiRechargeDialogVisible.value = false;
      await getUserList();
    } else {
      ElMessage.error(res.msg || 'AI额度充值失败');
    }
  } catch (error: any) {
    ElMessage.error('AI额度充值失败，' + error.message);
  } finally {
    aiRechargeLoading.value = false;
  }
};

// 保存编辑
const saveEditForm = async () => {
  try {
    const res = await updateUserUsingPost({
      ...editForm.value
    });
    if (res.code === 200) {
      ElMessage.success("编辑成功");
      editDialogVisible.value = false;
      await getUserList();
    } else {
      ElMessage.error("编辑失败");
    }
  } catch (error: any) {
    ElMessage.error("编辑失败，" + error.message);
  }
};
const resetEditField = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  editDialogVisible.value = false;
  formEl.resetFields();
  imageUrl.value = ""; // 重置预览图
};

// 查看用户
const view = (row) => {
  viewForm.value = { ...row };
  viewDialogVisible.value = true;
};
const deleteUser = async (row) => {
  try {
    const res = await deleteUserUsingPost({
      id: row.id
    });
    if (res.code === 200) {
      ElMessage.success("删除成功");
      await getUserList();
    } else {
      ElMessage.error("删除失败");
    }
  } catch (error: any) {
    ElMessage.error("删除失败，" + error.message);
  }
};
// 分页改变时触发
const handleCurrentChange = (page) => {
  pagination.value.currentPage = page;
  getUserList();
};
const cancelEvent = () => {
  ElMessage.success({
    duration: 1000,
    message: "取消删除成功"
  });
};
const resetSearchParams = () => {
  searchParams.value.userName = "";
  searchParams.value.userProfile = "";
  searchParams.value.userAccount = "";
};
// 图片上传相关
const imageUrl = ref("");

// 处理头像变更
const handleAvatarChange = (file: any) => {
  const reader = new FileReader();
  reader.readAsDataURL(file.raw);
  reader.onload = () => {
    imageUrl.value = reader.result as string;
  };
  
  // 上传文件到服务器
  uploadAvatar(file.raw);
};

// 上传头像
const uploadAvatar = async (file: File) => {
  if (!file) {
    ElMessage.warning('请先选择头像图片');
    return;
  }
  
  // 检查文件大小和类型
  const fileSize = file.size / 1024 / 1024; // 转换为MB
  const fileType = file.type.split('/')[1];
  const allowedTypes = ['jpeg', 'jpg', 'png', 'svg', 'webp'];
  
  if (fileSize > 1) {
    ElMessage.error('头像图片大小不能超过1MB');
    return;
  }
  
  if (!allowedTypes.includes(fileType)) {
    ElMessage.error(`不支持的文件类型: ${fileType}，请选择 ${allowedTypes.join('/')} 格式的图片`);
    return;
  }
  
  try {
    ElMessage.info({
      message: '头像图片上传中...',
      duration: 0,
      showClose: true
    });
    
    const response = await uploadFileUsingPost(
      { biz: 'user_avatar' }, // URL参数，使用用户头像的业务类型
      {}, // body参数
      file // 文件
    );
    
    ElMessage.closeAll();
    
    if (response.code === 200) {
      // 上传成功，设置新头像URL
      editForm.value.userAvatar = response.data; // 直接更新头像
      ElMessage.success('头像图片上传成功');
    } else {
      ElMessage.error(`上传失败: ${response.message || '未知错误'}`);
    }
  } catch (error: any) {
    ElMessage.closeAll();
    console.error('头像图片上传出错:', error);
    ElMessage.error(`上传失败: ${error.message || '未知错误'}`);
  }
};

// 处理充值命令
const handleRechargeCommand = (command: string, row: any) => {
  if (command === 'balance') {
    openRechargeDialog(row);
  } else if (command === 'ai') {
    openAiRechargeDialog(row);
  }
};
// 页面挂载时初始化数据
onMounted(() => {
  getUserList();
});
</script>

<style scoped lang="scss">
.upload-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  width: 100%;
}

.avatar-uploader {
  width: 200px;
  height: 200px;
  border: 2px dashed #dcdfe6;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.avatar-uploader:hover {
  border-color: #409eff;
  background-color: rgba(64, 158, 255, 0.05);
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.2);
}

.avatar-preview {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.upload-area {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #909399;
  font-size: 14px;
  padding: 20px;
}

.upload-icon {
  font-size: 40px;
  margin-bottom: 16px;
  color: #c0c4cc;
}

.upload-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.primary-text {
  font-size: 16px;
  color: #606266;
  margin-bottom: 8px;
}

.secondary-text {
  font-size: 12px;
  color: #909399;
}

.upload-tips {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
  text-align: center;
  width: 100%;
  background-color: #f8f9fa;
  padding: 8px;
  border-radius: 4px;
  margin-top: 12px;
}

.operation-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.operation-buttons .el-button {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 5px;
}

:deep(.recharge-dialog) {
  .el-dialog__body {
    padding-top: 10px;
  }
  
  .el-form-item {
    margin-bottom: 20px;
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 10px;
  }
  
  .el-input-number {
    width: 100%;
  }
}

.recharge-container {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

.recharge-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  gap: 15px;
  justify-content: center;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-info h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

.user-account {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.balance-info {
  text-align: center;
  margin-bottom: 20px;
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
}

.balance-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.balance-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.recharge-form {
  margin-bottom: 20px;
}

.form-item {
  margin-bottom: 15px;
}

.form-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.required {
  color: #f56c6c;
  margin-right: 4px;
}

.amount-input-container {
  display: flex;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
  background-color: #fff;
}

.amount-input-container .currency-prefix {
  padding: 0 10px;
  font-size: 14px;
  color: #606266;
}

.amount-input {
  flex-grow: 1;
  border: none;
  outline: none;
}

.quick-amounts {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.quick-amounts .el-button {
  flex: 1;
  min-width: 60px;
}

.quick-amounts .el-button.active {
  color: #409eff;
  border-color: #409eff;
  background-color: #ecf5ff;
}

.recharge-preview {
  border-top: 1px solid #eee;
  padding-top: 15px;
  margin-top: 15px;
}

.preview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.preview-label {
  font-size: 14px;
  color: #606266;
}

.preview-value {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

:deep(.el-dialog__body) {
  padding-top: 10px;
  padding-bottom: 10px;
}

:deep(.el-input-number .el-input__inner) {
  text-align: left;
}

:deep(.el-input.is-disabled .el-input__inner) {
  color: #333;
}

// AI充值对话框样式
.ai-recharge-dialog {
  .balance-info {
    background-color: #f0f9eb;
  }
  
  .quick-amounts .el-button.active {
    color: #67c23a;
    border-color: #67c23a;
    background-color: #f0f9eb;
  }
}
</style>
